import React,{Component} from 'react'
import { Layout,Menu,Dropdown,Modal} from 'antd';
import {
    PieChartOutlined,
    UserOutlined,
    DownOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';

import {Route,Switch,Link} from 'react-router-dom';
import Index from './index/index'
import Stu from './stu/stu'
import User from './user/user'
import Shop from './shop/shop'
import './home.css'

const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;

export default class home extends Component{
    state = {
        collapsed: false,
    };
    onCollapse = collapsed => {
        this.setState({ collapsed });
    };
    //判断用户是否登录
    componentWillMount() {
        // 获取localstorage
        let userInfo = localStorage.getItem("user");
        if(userInfo==null){
            this.props.history.push("/login")
        }else{
            return;
        }
    }
    //展示个人信息
    GeRenCenter(){
        //弹框个人信息
        Modal.info({
            title: '个人信息',
            content: (
                <div>
                    <p>{localStorage.getItem("user")}</p>
                    <p>管理员</p>
                </div>
            ),
            onOk() {},
        });
    }
    //退出登录
    logout(){
        Modal.confirm({
            title: '确认删除此项目吗?',
            icon: <ExclamationCircleOutlined/>,
            content: '',
            okText: '是',
            okType: 'danger',
            cancelText: '否',
            onOk: () => {
                localStorage.removeItem("user")
                this.props.history.push("/login")
            }, onCancel() {},
       });
    }
    render() {
        const { collapsed } = this.state;
        return (
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                    <div className="logo" />
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                        <Menu.Item key="1" icon={<PieChartOutlined />}>
                            <Link to="/index">首页</Link>
                        </Menu.Item>
                        <SubMenu key="sub1" icon={<UserOutlined />} title="信息管理">
                            <Menu.Item key="2">
                                <Link to="/user">用户信息</Link>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Link to="/stu">学生信息</Link>
                            </Menu.Item>
                            <Menu.Item key="4">
                                <Link to="/shop">商品信息</Link>
                            </Menu.Item>
                        </SubMenu>
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }}>
                        <div className="header">
                            <h2 style={{marginLeft:16}}>欢迎，{localStorage.getItem("user")}，来到后台管理系统</h2>
                            <div className="dropdown">
                                <Dropdown overlay={ <Menu>
                                    <Menu.Item>
                                        <a
                                            target="_blank"
                                            onClick={this.GeRenCenter.bind(this)}
                                        >
                                            个人中心
                                        </a>
                                    </Menu.Item>
                                    <Menu.Item>
                                        <a
                                            target="_blank"
                                            onClick={this.logout.bind(this)}
                                        >
                                            退出登录
                                        </a>
                                    </Menu.Item>
                                </Menu>}>
                                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                                        用户设置 <DownOutlined/>
                                    </a>
                                </Dropdown>
                            </div>
                        </div>
                    </Header>
                    <Content style={{ margin: 16 }}>
                        <div className="site-layout-background" style={{ padding: 24, minHeight: '100%' }}>
                            <Switch>
                                <Route path="/index" component={Index}/>
                                <Route path="/stu" component={Stu}/>
                                <Route path="/user" component={User}/>
                                <Route path="/shop" component={Shop}/>
                            </Switch>
                        </div>
                    </Content>
                </Layout>
            </Layout>
        );
    }
}
